<template>
  <div class="home">
    <el-row :xl="24" :lg="24" :xs="24" :gutter="10">
      <el-col :lg="5" :sm="24" :xs="24">
        <module1></module1>
        <module4></module4>
      </el-col>
      <el-col :lg="19" :sm="24" :xs="24">
        <module2></module2>
        <module3 class="mt10"></module3>
        <module5 class="mt10"></module5>
      </el-col>
    </el-row>
    <el-row :xl="24" :lg="24" :xs="24" :gutter="10" class="mt10">
      <el-col :lg="12">
        <module6></module6>
      </el-col>
      <el-col :lg="12">
        <module7></module7>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import module1 from "./home/module1";
import module2 from "./home/module2";
import module3 from "./home/module3";
import module4 from "./home/module4";
import module5 from "./home/module5";
import module6 from "./home/module6";
import module7 from "./home/module7";
export default {
  name: "home",
  components: {
    module1,
    module2,
    module3,
    module4,
    module5,
    module6,
    module7,
  },
  data() {
    return {
      name: "home",
      role: localStorage.getItem("role"),
      user_name: localStorage.getItem("user_name"),
    };
  },
  methods: {},
  created() {
    if (!localStorage.getItem("user_name")) {
      this.$router.replace("/login");
    }
  },
  mounted() {},
};
</script>
<style lang="css" scoped>
.home {
  margin-top: 20px;
}
.module3 {
  margin-top: 10px;
}
</style>
